<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="false">
    <div class="screen_container">
      <div class="screen_header">
        <div class="screen_header_text">元智训数字化学习平台</div>
      </div>
      <div class="screen_connect">
        <div class="screen_connect_left">
          <div class="real_data">
            <img class="left_title" src="./images/service_overview.png" alt="加载失败">
            <div class="real_data_mid">
              <div class="real_data_mid_text">
                <span>当前在线人数</span>
                <countTo class="count_to" :startVal="0" :endVal="onlineNum" :autoplay="true" :duration="1500"/>
              </div>
              <div class="real_data_mid_text">
                <span>今日登录人数</span>
                <countTo class="count_to" :startVal="0" :endVal="todayNum" :autoplay="true" :duration="1500"/>
              </div>
            </div>
            <div class="progress_list">
              <div class="progress_item_all">
                <div class="progress_item">
                  <div class="progress_item_in">
                    <el-progress :format="formatProgress" :width="82" type="circle" :percentage="50" :stroke-width="5" color="#0edbd5"
                                 text-color="#fcfcfc" define-back-color="#393d3e"
                    ></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_green">
                        CPU
                      </div>
                      <div class="absolute_progress light_green">
                        50%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_green">本日CDN流量</span>
              </div>
              <div class="progress_item_all">
                <div class="progress_item border_orange">
                  <div class="progress_item_in border_orange">
                    <el-progress :format="formatProgress" :width="82" type="circle" :percentage="25" :stroke-width="5" color="#fea637"
                                 text-color="#fcfcfc" define-back-color="#393d3e"
                    ></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_orange">
                        内存
                      </div>
                      <div class="absolute_progress light_orange">
                        25%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_orange">100GB</span>
              </div>
              <div class="progress_item_all">
                <div class="progress_item border_blue">
                  <div class="progress_item_in border_blue">
                    <el-progress :format="formatProgress" :width="82" type="circle" :percentage="80" :stroke-width="5" color="#30aafe"
                                 text-color="#fcfcfc" define-back-color="#393d3e"
                    ></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_blue">
                        ESC硬盘
                      </div>
                      <div class="absolute_progress light_blue">
                        80%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_blue">实时带宽</span>
              </div>
              <div class="progress_item_all">
                <div class="progress_item border_aqua">
                  <div class="progress_item_in border_aqua">
                    <el-progress :format="formatProgress" :width="82" type="circle" :percentage="60" :stroke-width="5" color="#50d57d"
                                 text-color="#fcfcfc" define-back-color="#393d3e"
                    ></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_aqua">
                        OSS存储
                      </div>
                      <div class="absolute_progress light_aqua">
                        60%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_aqua">30Kbps</span>
              </div>
            </div>
          </div>

          <div class="charts_all">
            <img class="left_title" src="./images/resource_usage.png" alt="加载失败">
            <div class="charts_all_item">
              <div class="charts_all_item_title light_baby_aqua">每日CDN使用量</div>
              <div ref="cdnRef" class="used_cdn"></div>
            </div>
            <div class="charts_all_item">
              <div class="charts_all_item_title light_baby_blue">磁盘使用情况</div>
              <div ref="diskRef" class="used_cdn"></div>
            </div>
          </div>
        </div>
        <div class="screen_connect_mid">
          <div class="screen_connect_mid_up">
            <img class="mid_title" src="./images/school_info.png" alt="加载失败">
            <div class="map_box">
              <div class="map_btns">
                <div :class="{'checked':showType==1}" @click="showType=1" class="btn_text">列表</div>
                <div :class="{'checked':showType==2}" @click="showType=2" class="btn_text">分布</div>
              </div>
              <div v-show="showType==2&&showProvince" class="baidumap cursor_pointer">
                <div @click="changeProvince(false)" style="flex: 1"></div>
                <img class="province_zj" src="./images/zhejiang.png" alt="加载失败">
                <div @click="changeProvince(false)" style="flex: 1"></div>
              </div>
              <div v-show="showType==2&&!showProvince" class="baidumap">
                <img class="china_map cursor_pointer" src="./images/china_map.png" alt="加载失败">
                <div v-show="showDialog" class="school_dialog">
                  <div class="school_dialog_title">XXX第一技师学院</div>
                  <div class="school_dialog_text mt_10">课程数量：40</div>
                  <div class="school_dialog_text">教师数量：40</div>
                  <div class="school_dialog_text">学生数量：40</div>
                  <div class="school_dialog_mid mt_15">OSS存储量：40</div>
                  <div class="school_dialog_mid">累计CDN存储量：40</div>
                  <div class="school_dialog_bottom mt_15">今日CDN用量：40</div>
                  <div class="school_dialog_bottom">今日登录人次：40</div>
                  <div class="school_dialog_bottom">当前在线人数：40</div>
                  <div class="school_dialog_btn">
                    <div class="more_btn">更多详情</div>
                  </div>
                </div>
                <img @click.stop="showDialog=false" v-show="showDialog" class="not_select" src="./images/select.png" alt="加载失败">
                <img @click.stop="showDialog=true" v-show="!showDialog" class="not_select" src="./images/not_select.png" alt="加载失败">
                <div @click="changeProvince(true)" class="address_map light_green">浙江</div>
              </div>
              <div v-show="showType==1" class="baidumap">
                <div class="lists_group">
                  <div class="lists_header">
                    <div class="lists_header_item w_90">
                      学校名称
                    </div>
                    <div class="lists_header_item w_30">
                      级别
                    </div>
                    <div class="lists_header_item w_60">
                      在线人数
                    </div>
                    <div class="lists_header_item w_60">
                      今日登录
                    </div>
                    <div class="lists_header_item w_60">
                      OSS累计
                    </div>
                    <div class="lists_header_item w_60">
                      CDN累计
                    </div>
                    <div class="lists_header_item w_60">
                      今日CDN
                    </div>
                    <div class="lists_header_item w_60">
                      学生数
                    </div>
                    <div class="lists_header_item w_60">
                      教师数
                    </div>
                    <div class="lists_header_item w_60">
                      详情
                    </div>
                  </div>
                  <div id="review_box" ref="review" class="schoolList">
                    <div ref="elList" id="elList">
                      <div v-for="(index) in 30" :key="index" class="lists_body">
                        <div class="lists_body_item">
                          <el-tooltip class="item w_90" effect="dark" content="学校名称学校名称学校名称学校名称" placement="top">
                            <div class="school_name">学校名称_{{ index }}</div>
                          </el-tooltip>
                        </div>
                        <div class="lists_body_item w_30">
                          <div class="hierarchy">
                            <div class="hierarchy_text">1</div>
                          </div>
                        </div>
                        <div class="lists_body_item w_60">
                          在线人数
                        </div>
                        <div class="lists_body_item w_60">
                          今日登录
                        </div>
                        <div class="lists_body_item w_60">
                          OSS累计
                        </div>
                        <div class="lists_body_item w_60">
                          CDN累计
                        </div>
                        <div class="lists_body_item w_60">
                          今日CDN
                        </div>
                        <div class="lists_body_item w_60">
                          学生数
                        </div>
                        <div class="lists_body_item w_60">
                          教师数
                        </div>
                        <div class="lists_body_item w_60 color_blue">
                          查看
                        </div>
                      </div>
                    </div>
                    <div ref="elList_copy"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="screen_connect_mid_down">
            <img class="mid_title" src="./images/statistical_overview.png" alt="加载失败">
            <div class="collect_overview">
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">学校数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">分院数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">工作站数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">课程数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">专业数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">班级数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">教师数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="加载失败">
                <div class="collect_overview_item_text">学生数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator="" :startVal="0" :endVal="schoolNum" :autoplay="true" :duration="1200"/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="screen_connect_right">
          <div class="screen_connect_right_charts">
            <img class="left_title" src="./images/login_info.png" alt="加载失败">
            <div class="chart_item">
              <div class="chart_item_title light_baby_aqua">学生登录情况</div>
              <div class="stu_login" ref="stuLoginRef"></div>
            </div>
            <div class="chart_item">
              <div class="chart_item_title light_baby_aqua">教师登录情况</div>
              <div class="stu_login" ref="teaLoginRef"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
import scaleBox from './components/scaleBox'
import * as echarts from 'echarts'
import anime from 'animejs/lib/anime.js'
import countTo from 'vue-count-to'

export default {
  name: 'generalizationData',
  components: {
    countTo, scaleBox
  },
  data() {
    return {
      showDialog: false,
      showProvince: false,
      showType: '2',
      onlineNum: 35000,
      todayNum: 45000,
      schoolNum: 4500,
      week: ['2.24', '2.25', '2.26', '2.27', '2.28', '2.29', '3.01'],
      elevatorNum: ['8', '12', '11', '13', '15', '7', '12'],
      position_center: {
        bdLNG: '114.108551',
        bdLAT: '32.567181'
      },
      allProvinceList: [
        {
          bdLNG: '116.404',
          bdLAT: '39.915',
          name: '',
          num: '120'
        }
      ],
      allCityList: [
        {
          bdLNG: '120.216085',
          bdLAT: '30.254829',
          name: '杭州市',
          num: '120'
        },
        {
          bdLNG: '121.613597',
          bdLAT: '29.87584',
          name: '宁波市',
          num: '20'
        }
      ],
      timer: null
    }
  },
  watch: {
    showType: {
      immediate: true,
      handler(val) {
        if (val == 1) {
          this.roll(50, 'elList', 'elList_copy', 'review', 'timer')
        } else if (val == 2) {
          clearInterval(this.timer)
        }
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  mounted() {
    this.setOptionCdn()
    this.setOptionDisk()
    this.setStuLoginRef()
    this.setTeaLoginRef()
  },
  methods: {
    changeProvince(Boolean) {
      anime({
        targets: '.province_zj',
        scale: [
          { value: .1, easing: 'easeOutSine', duration: 200 },
          { value: 1, easing: 'easeInOutQuad', duration: 300 }
        ],
        delay: anime.stagger(0, { grid: [14, 5], from: 'center' })
      })
      this.showProvince = Boolean
    },
    formatProgress() {
      return ''
    },
    //列表滚动
    roll(t, elList, elList_copy, review, timer) {
      let ul1 = this.$refs[elList]
      let ul2 = this.$refs[elList_copy]
      let ulbox = this.$refs[review]
      ul2.innerHTML = ul1.innerHTML
      ulbox.scrollTop = 0 // 开始无滚动时设为0
      // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
      this[timer] = setInterval(() => {
        this.rollStart(elList, review)
      }, t)
      // 鼠标移入div时暂停滚动
      ulbox.onmouseover = () => {
        clearInterval(this[timer])
      }
      // 鼠标移出div后继续滚动
      ulbox.onmouseout = () => {
        this[timer] = setInterval(() => {
          this.rollStart(elList, review)
        }, t)
      }
    },
    // 开始滚动函数
    rollStart(elList, review) {
      // 上面声明的DOM对象为局部对象需要再次声明
      let ul1 = this.$refs[elList]
      let ulbox = this.$refs[review]
      let heightCss = window.getComputedStyle(ulbox).height.replace('px', '') - 0
      // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
      if (ulbox.scrollTop + heightCss >= ul1.scrollHeight) {
        ulbox.scrollTop = 0
      } else {
        ulbox.scrollTop++
      }
    },

    setOptionCdn() {
      let myChart = echarts.init(this.$refs.cdnRef)
      let option
      option = {
        color: '#32c268',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#32c268',
              backgroundColor: '#052a53'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.week,
            boundaryGap: false, // 不留白，从原点开始
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#445d68', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#e3e7eb' //坐标值得具体的颜色

              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#9a9fa7', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value}GB', //显示数据带上GB
              textStyle: {
                color: '#e3e7eb' //坐标值得具体的颜色
              }
            },
            splitLine: {
              show: true, lineStyle: {
                color: ['#5c6381'],
                width: 1,
                type: 'solid'
              }
            } //去除网格线
          }
        ],
        series: [
          {
            name: '使用量',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2
            },
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#31c068'
                },
                {
                  offset: 0.5,
                  color: '#5cc48a'
                },
                {
                  offset: 0.7,
                  color: '#0a3f5a'
                },
                {
                  offset: 1,
                  color: '#052f51'
                }
              ])
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#32c268',
                    fontsize: '16'
                  },
                  formatter: '{c}GB' //显示数据带上GB
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.elevatorNum
          }
        ]
      }
      option && myChart.setOption(option)
    },
    setOptionDisk() {
      let myChart = echarts.init(this.$refs.diskRef)
      let option
      option = {
        color: '#19d4fd',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#19d4fd',
              backgroundColor: '#052a53'
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.week,
            boundaryGap: false, // 不留白，从原点开始
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#445d68', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#e3e7eb' //坐标值得具体的颜色

              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#9a9fa7', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value}GB', //显示数据带上GB
              textStyle: {
                color: '#e3e7eb' //坐标值得具体的颜色
              }
            },
            splitLine: {
              show: true, lineStyle: {
                color: ['#5c6381'],
                width: 1,
                type: 'solid'
              }
            } //去除网格线
          }
        ],
        series: [
          {
            name: '使用量',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2
            },
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#19d5fe'
                },
                {
                  offset: 0.5,
                  color: '#3ac5e2'
                },
                {
                  offset: 0.7,
                  color: '#0d4b7b'
                },
                {
                  offset: 1,
                  color: '#052c54'
                }
              ])
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#19d4fd',
                    fontsize: '16'
                  },
                  formatter: '{c}GB' //显示数据带上GB
                }
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.elevatorNum
          }
        ]
      }
      option && myChart.setOption(option)
    },
    setStuLoginRef() {
      let data = [20, 18, 30, 35, 25, 35, 19, 35, 40, 38]
      let xAxisData = ['2.24', '2.25', '2.26', '2.27', '2.28', '2.29', '3.01', '3.02', '3.03', '3.04']

      let myChart = echarts.init(this.$refs.stuLoginRef)
      let colorArr = ['#29a5f9', '#46bfe6', '#13afba']
      //3d柱状图本身颜色配置
      let color = {
        type: 'linear',
        colorStops: [
          {
            offset: 0,
            color: colorArr[0]
          },
          {
            offset: 0.5,
            color: colorArr[0]
          },
          {
            offset: 0.5,
            color: colorArr[1]
          },
          {
            offset: 1,
            color: colorArr[1]
          }
        ]
      }
      let barWidth = 20
      let constData = []
      let showData = []
      data.filter(function(item) {
        if (item) {
          constData.push(1)
          showData.push(item)
        } else {
          constData.push(0)
          showData.push(
            {
              value: 1,
              itemStyle: {
                normal: {
                  borderColor: 'rgba(0,0,0,0)',
                  borderWidth: 2,
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
          )
        }
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let str = params[0].axisValue
            params.filter(function(item) {
              if (item.componentSubType == 'bar') {
                str = `${str}<br/>` +
                  `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1daad6;"></span>` +
                  `登录数：${item.value}`
              }
            })
            return str
          },
          axisPointer: {
            type: 'none'

          }
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [10, 17],
            lineStyle: {
              color: '#FFF',
              width: 0 //  改变坐标线的颜色
            }
          },
          offset: 8,
          axisLabel: {
            //调整x轴的lable
            textStyle: {
              fontSize: 12,// 让字体变大
              fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
              fontWeight: '500',
              color: '#f0f1f2'
            }

          }
        },
        yAxis: {
          splitLine: {    //刻度线
            show: true,
            lineStyle: {
              color: '#0f4685',
              type: 'dotted'
            }
          },
          splitArea: {     //柱状图后面的背景色
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //调整y轴的lable
            textStyle: {
              color: '#f0f1f2',
              fontSize: 12 // 让字体变大
            },
            show: true
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [15, 17],
            lineStyle: {
              color: 'rgba(0 0 0 0)',
              width: 0 //  改变坐标线的颜色
            }
          }
        },
        series: [
          {
            z: 1,
            type: 'bar',
            barWidth: barWidth,
            barGap: '0%',
            data: data,
            itemStyle: {
              normal: {
                color: color,
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: '#f0f1f2',
                    fontSize: 12
                  }
                }
              }
            }
          },
          {
            z: 2,
            type: 'pictorialBar',
            data: constData,
            symbol: 'diamond',
            symbolOffset: ['0%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: showData,
            symbol: 'diamond',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [barWidth - 2, (10 * (barWidth - 2)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr[2],
                borderWidth: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colorArr[0]
                  },
                  {
                    offset: 1,
                    color: colorArr[2]
                  }
                ])
              }
            },
            tooltip: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    setTeaLoginRef() {
      let data = [20, 18, 30, 35, 25, 35, 19, 35, 40, 38]
      let xAxisData = ['2.24', '2.25', '2.26', '2.27', '2.28', '2.29', '3.01', '3.02', '3.03', '3.04']

      let myChart = echarts.init(this.$refs.teaLoginRef)
      let colorArr = ['#00939b', '#01e4f2', '#22e0e6']
      //3d柱状图本身颜色配置
      let color = {
        type: 'linear',
        colorStops: [
          {
            offset: 0,
            color: colorArr[0]
          },
          {
            offset: 0.5,
            color: colorArr[0]
          },
          {
            offset: 0.5,
            color: colorArr[1]
          },
          {
            offset: 1,
            color: colorArr[1]
          }
        ]
      }
      let barWidth = 20
      let constData = []
      let showData = []
      data.filter(function(item) {
        if (item) {
          constData.push(1)
          showData.push(item)
        } else {
          constData.push(0)
          showData.push(
            {
              value: 1,
              itemStyle: {
                normal: {
                  borderColor: 'rgba(0,0,0,0)',
                  borderWidth: 2,
                  color: 'rgba(0,0,0,0)'
                }
              }
            }
          )
        }
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            let str = params[0].axisValue
            params.filter(function(item) {
              if (item.componentSubType == 'bar') {
                str = `${str}<br/>` +
                  `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00939b;"></span>` +
                  `登录数：${item.value}`
              }
            })
            return str
          },
          axisPointer: {
            type: 'none'

          }
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [10, 17],
            lineStyle: {
              color: '#FFF',
              width: 0 //  改变坐标线的颜色
            }
          },
          offset: 8,
          axisLabel: {
            //调整x轴的lable
            textStyle: {
              fontSize: 12,// 让字体变大
              fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
              fontWeight: '500',
              color: '#f0f1f2'
            }

          }
        },
        yAxis: {
          splitLine: {    //刻度线
            show: true,
            lineStyle: {
              color: '#0f4685',
              type: 'dotted'
            }
          },
          splitArea: {     //柱状图后面的背景色
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //调整y轴的lable
            textStyle: {
              color: '#f0f1f2',
              fontSize: 12 // 让字体变大
            },
            show: true
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [15, 17],
            lineStyle: {
              color: 'rgba(0 0 0 0)',
              width: 0 //  改变坐标线的颜色
            }
          }
        },
        series: [
          {
            z: 1,
            type: 'bar',
            barWidth: barWidth,
            barGap: '0%',
            data: data,
            itemStyle: {
              normal: {
                color: color,
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: '#f0f1f2',
                    fontSize: 12
                  }
                }
              }
            }
          },
          {
            z: 2,
            type: 'pictorialBar',
            data: constData,
            symbol: 'diamond',
            symbolOffset: ['0%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 3,
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: showData,
            symbol: 'diamond',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [barWidth - 2, (10 * (barWidth - 2)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr[2],
                borderWidth: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colorArr[0]
                  },
                  {
                    offset: 1,
                    color: colorArr[2]
                  }
                ])
              }
            },
            tooltip: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
@mixin all_flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen_container {
  width: 1920px;
  height: 1080px;
  background-image: url("./images/bg_img.png");
  background-size: cover;
}

.screen_header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-image: url("./images/screen_header.png");
  background-size: cover;

  &_text {
    font-size: 48px;
    font-weight: 400;
    background-image: -webkit-linear-gradient(top, #fdfeff, #add6e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: YouSheBiaoTiHei;
  }
}

.screen_connect {
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;

  &_left {
    width: 494px;
    margin: 0 37px 0 43px;

    .real_data {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);

      &_mid {
        width: 100%;
        padding: 20px 84px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &_text {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            font-size: 16px;
            font-weight: normal;
            color: #FFFFFF;
          }

          .count_to {
            font-size: 30px;
            font-weight: 500;
            color: #21FFFC;
            margin-top: 12px;
          }
        }
      }

      .progress_list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px 25px;
        box-sizing: border-box;

        .progress_item_all {
          display: flex;
          flex-direction: column;
          align-items: center;

          .progress_item {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #144258;
            @include all_flex_center;

            &_in {
              width: 94px;
              height: 94px;
              border-radius: 50%;
              border: 4px solid #097f90;
              @include all_flex_center;
            }
          }

          span {
            margin-top: 6px;
            font-size: 14px;
            color: white;
          }
        }

      }
    }

    .charts_all {
      width: 100%;
      height: 620px;
      background: rgba(0, 86, 150, 0.15);

      &_item {
        width: 100%;

        &_title {
          width: 100%;
          font-size: 16px;
          text-align: center;
          color: white;
          font-family: YouSheBiaoTiHei;
        }

        .used_cdn {
          width: 100%;
          height: 280px;
          padding: 0 28px;
          box-sizing: border-box;
        }
      }
    }
  }

  &_mid {
    width: 760px;

    &_up {
      background: rgba(0, 86, 150, 0.15);
    }

    &_down {
      margin-top: 16px;
      background: rgba(0, 86, 150, 0.15);

      .collect_overview {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 31px 58px;
        box-sizing: border-box;

        &_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          width: 151px;
          margin-top: 10px;

          .statistics_bg {
            width: 100%;
            height: 106px;
          }

          &_text {
            font-size: 16px;
            font-weight: normal;
            color: #FFFFFF;
            margin-top: 2px;
          }

          &_value {
            display: flex;
            position: absolute;
            top: 20px;
            margin-left: 6px;

            .collect_count_to {
              font-size: 30px;
              font-family: YouSheBiaoTiHei;
              font-weight: bold;
              color: #FFFFFF;
              background: linear-gradient(0deg, #6BD3FF 0%, #FFFFFF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .up_down {
              display: flex;
              align-items: center;
              margin: 10px 0 0 0;

              .el-icon-caret-bottom {
                font-size: 8px;
                color: #fe2222;
              }

              .el-icon-caret-top {
                font-size: 8px;
                color: #00f00d;
              }

              .up_down_value {
                font-size: 12px;
                font-weight: 500;
                color: #FFFFFF;
                margin-left: 2px;
              }
            }
          }
        }
      }
    }
  }

  &_right {
    width: 494px;
    margin-left: 33px;

    &_charts {
      width: 100%;
      background: rgba(0, 86, 150, 0.15);

      .chart_item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        &_title {
          font-size: 20px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #FFFFFF;
        }

        .stu_login {
          width: 100%;
          height: 422px;
        }
      }
    }
  }
}

.map_box {
  padding: 15px 10px;
  box-sizing: border-box;
  background-image: url("./images/bg_map.png");
  background-size: 100% 100%;

  .map_btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: white;
    padding: 0 0 10px;
    box-sizing: border-box;

    .btn_text {
      user-select: none;
      cursor: pointer;
      width: 80px;
      height: 30px;
      background: rgba(255, 255, 255, 0.1);
      text-align: center;
      line-height: 30px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}

.checked {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #7afffd !important;
  color: #7afffd;
}

.baidumap {
  width: 100%;
  height: 427px;
  display: flex;
  justify-content: center;
  position: relative;

  .school_dialog {
    position: absolute;
    top: -20px;
    left: 0;
    width: 180px;
    height: 280px;
    background: rgba(5, 51, 99, 0.7);
    border: 2px solid #4ED3FF;

    &_title {
      font-size: 16px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #FFFFFF;
      width: 100%;
      height: 38px;
      background: rgba(9, 156, 232, 0.4);
      border-bottom: 2px solid #4ED3FF;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &_text {
      font-size: 14px;
      font-weight: normal;
      color: #E7FDFF;
      margin: 0 0 0 12px;
    }

    &_mid {
      font-size: 14px;
      font-weight: normal;
      color: #E7FDFF;
      margin: 0 0 0 12px;
    }

    &_bottom {
      font-size: 14px;
      font-weight: normal;
      color: #35E3EF;
      margin: 0 0 0 12px;
    }

    &_btn {
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .more_btn {
        width: 70px;
        height: 30px;
        background: rgba(7, 76, 146, 0.89);
        border: 1px solid #4ED3FF;
        border-radius: 4px;
        font-size: 14px;
        font-weight: normal;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
      }
    }
  }

  .not_select {
    width: 47px;
    height: 47px;
    object-fit: cover;
    position: absolute;
    top: 235px;
    left: 514px;
    cursor: pointer;
  }
}

.address_map {
  position: absolute;
  top: 265px;
  right: 192px;
  color: #caefff;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
}

.cursor_pointer {
  cursor: pointer;
}

.lists_group {
  width: 100%;
  background: rgba(0, 86, 150, 0.4);
  border: 2px solid #099CE8;
  padding: 20px 8px;
  box-sizing: border-box;

  .lists_header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;

    &_item {
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      color: #FFFFFF;
    }
  }

  .lists_body {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 10px;

    &_item {
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      color: #FFFFFF;
    }
  }

  .lists_body:nth-child(1) {
    margin-top: 0;
  }
}

::v-deep .bubble {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 14px;
  font-weight: bold;
}

.w_90 {
  width: 90px;
}

.w_60 {
  width: 60px;
}

.w_30 {
  width: 30px;
}

.color_blue {
  color: #15c3d7 !important;
  cursor: pointer;
  user-select: none;
}

.school_name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.schoolList {
  margin-top: 10px;
  width: 100%;
  height: 360px;
  overflow: hidden;
}

.absolute {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;

  &_text {
    font-size: 12px;
    color: white;
  }

  &_progress {
    font-size: 18px;
    color: white;
  }
}

.left_title {
  width: 100%;
  height: 43px;
}

.mid_title {
  width: 100%;
  height: 43px;
}

.light_green {
  text-shadow: 0 0 1px white, 0 0 2px #0edbd5, 0 0 3px #3ea8b2, 0 0 4px white;
}

.light_orange {
  text-shadow: 0 0 1px white, 0 0 2px #f29b34, 0 0 3px #a56f63, 0 0 4px white;
}

.light_blue {
  text-shadow: 0 0 1px white, 0 0 2px #3a80fc, 0 0 3px #2c6db9, 0 0 4px white;
}

.light_aqua {
  text-shadow: 0 0 1px white, 0 0 2px #46d175, 0 0 3px #3a8b83, 0 0 4px white;
}

.light_baby_blue {
  text-shadow: 0 0 1px white, 0 0 2px #145277, 0 0 3px #3f6b84, 0 0 4px white;
}

.light_baby_aqua {
  text-shadow: 0 0 1px white, 0 0 2px #0c607a, 0 0 3px #438c9f, 0 0 4px white;
}

.border_orange {
  border-color: #695e37 !important;
}

.border_blue {
  border-color: #1d4f9a !important;
}

.border_aqua {
  border-color: #258070 !important;
}

.mt_15 {
  margin-top: 14px !important;
}

.mt_10 {
  margin-top: 10px !important;
}

.hierarchy {
  width: 100%;
  background-image: url("./images/hierarchy_img.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  &_text {
    margin: 1px 0 0 7px;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    color: #FFFFFF;
  }
}

</style>
